<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../res/css/bootstrap.min.css">
  <title>Document</title>
</head>

<body>
  <main role="main" class="px-3">
    <!-- 1、标题 -->
    <div
      class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
      <h1 class="h2">销售额</h1>
      <!-- 按钮组 -->
      <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group mr-2">
          <button type="button" class="btn btn-sm btn-outline-secondary">分享</button>
          <button type="button" class="btn btn-sm btn-outline-secondary">导出</button>
        </div>
        <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
          <span data-feather="calendar" width="18px" height="18px" class=""></span>
          本周
        </button>
      </div>
    </div>
    <!-- 2、图表 -->
    <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>

    <!-- 分析 -->
    <div class="mb-3 pt-3 pb-2 border-bottom">
      <h2>数据分析</h2>
    </div>
    <div class="row">
      <div class="col-lg-6 col-xl-5 d-flex">
        <div class="w-100">
          <div class="row">
            <div class="col-sm-6">
              <div class="card mb-4">
                <div class="card-body">
                  <div class="row">
                    <div class="col mt-0">
                      <h5 class="card-title">
                        移动端客户
                      </h5>
                    </div>

                    <div class="col-auto">
                      <span data-feather="user-minus"></span>
                    </div>
                  </div>
                  <h1 class="mt-2 mb-4">2.562</h1>
                  <div class="mb-0 text-muted">
                    <span>
                      访客比平常少
                    </span>
                    <span class="text-danger mr-2">
                      2.65％
                    </span>
                  </div>
                </div>
              </div>
              <div class="card mb-4">
                <div class="card-body">
                  <div class="row">
                    <div class="col mt-0">
                      <h5 class="card-title">实时
                      </h5>
                    </div>

                    <div class="col-auto">
                      <span data-feather="activity"></span>
                    </div>
                  </div>
                  <h1 class=" mt-2 mb-4">17.212</h1>
                  <div class="mb-0">
                    实时数据比平常多
                    <span class="text-success">
                      5.50％
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="card mb-4">
                <div class="card-body">
                  <div class="row">
                    <div class="col mt-0">
                      <h5 class="card-title">售后</h5>
                    </div>
                    <div class="col-auto">
                      <span data-feather="tool"></span>
                    </div>
                  </div>
                  <h1 class="mt-2 mb-4">
                    100
                  </h1>
                  <div class="mb-0">
                    金额比往常多
                    <span class="text-success">
                      8.35％
                    </span>
                  </div>
                </div>
              </div>
              <div class="card mb-4">
                <div class="card-body">
                  <div class="row">
                    <div class="col mt-0">
                      <h5 class="card-title">活动</h5>
                    </div>

                    <div class="col-auto">
                      <span data-feather="shopping-cart"></span>
                    </div>
                  </div>
                  <h1 class=" mt-2 mb-4">0.2</h1>
                  <div class="mb-0">
                    活动比平常少
                    <span class="text-danger">
                      4.25％
                      </font>
                    </span>


                    </font>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-6 col-xl-7 d-flex ">
        <div class="w-100">
          <div class="row">
            <div class="col-sm-6">
              <div class="card mb-4">
                <div class="card-body">
                  <div class="row">
                    <div class="col mt-0">
                      <h5 class="card-title">
                        <font style="vertical-align: inherit;">
                          <font style="vertical-align: inherit;">PC端客户</font>
                        </font>
                      </h5>
                    </div>
                    <div class="col-auto">
                      <span data-feather="user-plus"></span>
                    </div>
                  </div>
                  <h1 class=" mt-2 mb-4">4.212</h1>
                  <div class="mb-0">
                    访客比平常多
                    <span class="text-success">
                      1.65％
                    </span>
                  </div>
                </div>
              </div>
              <div class="card mb-4">
                <div class="card-body">
                  <div class="row">
                    <div class="col mt-0">
                      <h5 class="card-title">资金</h5>
                    </div>
                    <div class="col-auto">
                      <span data-feather="dollar-sign"></span>
                    </div>
                  </div>
                  <h1 class=" mt-2 mb-4">$17.212</h1>
                  <div class="mb-0">
                    资金比上月少
                    <span class="text-danger">
                      0.50％
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="card mb-4">
                <div class="card-body">
                  <div class="row">
                    <div class="col mt-0">
                      <h5 class="card-title">涨幅</h5>
                    </div>

                    <div class="col-auto">
                      <span data-feather="external-link"></span>
                    </div>
                  </div>
                  <h1 class="mt-2 mb-4">
                    24.300
                  </h1>
                  <div class="mb-0">
                    访客比往常多
                    <span class="text-success">
                      8.35％
                    </span>
                  </div>
                </div>
              </div>
              <div class="card mb-4">
                <div class="card-body">
                  <div class="row">
                    <div class="col mt-0">
                      <h5 class="card-title">订单</h5>
                    </div>

                    <div class="col-auto">
                      <span data-feather="database"></span>
                    </div>
                  </div>
                  <h1 class="mt-2 mb-4"> 43</h1>
                  <div class="mb-0">
                    订单比平常少
                    <span class="text-danger">
                      1.25％的
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 热销产品 -->
    <div class="mb-3 pt-3 pb-2 border-bottom">
      <h2>热销产品</h2>
    </div>
    <div class="table-responsive text-center">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th>编号</th>
            <th>商品名称</th>
            <th>价钱</th>
            <th>数量</th>
            <th>总销售量</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>06011820114</td>
            <td>衬衫</td>
            <td>￥199</td>
            <td>90</td>
            <td>￥17910</td>
          </tr>
          <tr>
            <td>06011820115</td>
            <td>外套</td>
            <td>￥399</td>
            <td>80</td>
            <td>￥31920</td>
          </tr>
          <tr>
            <td>06011820116</td>
            <td>裤子</td>
            <td>￥599</td>
            <td>50</td>
            <td>￥29950</td>
          </tr>
          <tr>
            <td>06011820117</td>
            <td>外套</td>
            <td>￥399</td>
            <td>80</td>
            <td>￥31920</td>
          </tr>
          <tr>
            <td>06011820118</td>
            <td>外套</td>
            <td>￥399</td>
            <td>80</td>
            <td>￥31920</td>
          </tr>
          <tr>
            <td>06011820119</td>
            <td>外套</td>
            <td>￥399</td>
            <td>80</td>
            <td>￥31920</td>
          </tr>
          <tr>
            <td>06011820120</td>
            <td>外套</td>
            <td>￥399</td>
            <td>80</td>
            <td>￥31920</td>
          </tr>
          <tr>
            <td>06011820121</td>
            <td>外套</td>
            <td>￥399</td>
            <td>80</td>
            <td>￥31920</td>
          </tr>
          <tr>
            <td>06011820122</td>
            <td>外套</td>
            <td>￥399</td>
            <td>80</td>
            <td>￥31920</td>
          </tr>
          <tr>
            <td>06011820123</td>
            <td>外套</td>
            <td>￥399</td>
            <td>80</td>
            <td>￥31920</td>
          </tr>
          <tr>
            <td>06011820124</td>
            <td>外套</td>
            <td>￥399</td>
            <td>80</td>
            <td>￥31920</td>
          </tr>
          <tr>
            <td>06011820125</td>
            <td>外套</td>
            <td>￥399</td>
            <td>80</td>
            <td>￥31920</td>
          </tr>
          <tr>
            <td>06011820126</td>
            <td>外套</td>
            <td>￥399</td>
            <td>80</td>
            <td>￥31920</td>
          </tr>
          <tr>
            <td>06011820127</td>
            <td>外套</td>
            <td>￥399</td>
            <td>80</td>
            <td>￥31920</td>
          </tr>
          <tr>
            <td>06011820128</td>
            <td>外套</td>
            <td>￥399</td>
            <td>80</td>
            <td>￥31920</td>
          </tr>
          <tr>
            <td>06011820129</td>
            <td>外套</td>
            <td>￥399</td>
            <td>80</td>
            <td>￥31920</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="row">
      <div class="col-sm-12 col-md-5">
        <div class="py-2">显示表中16条信息
        </div>
      </div>
      <div class="col-sm-12 col-md-7">
        <nav aria-label="Page navigation example" class="mt-2">
          <ul class="pagination justify-content-end">
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Previous">
                上一页
              </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Next">
                下一页
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

  </main>
  <!-- 引入文件 -->
  <script src="../res/js/plug/Chart.min.js"></script>
  <script src="../res/js/plug/iframeResizer.contentWindow.min.js"></script>
  <!-- 引入图标库 -->
  <script src="https://unpkg.com/feather-icons"></script>
  <script>
    // 调用
    feather.replace();
    // 实例化一个Chart对象
    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: [
          'Sunday',
          'Monday',
          'Tuesday',
          'Wednesday',
          'Thursday',
          'Friday',
          'Saturday'
        ],
        datasets: [{
          data: [
            15339,
            21345,
            18483,
            24003,
            23489,
            24092,
            12034
          ],
          lineTension: 0,
          backgroundColor: 'transparent',
          borderColor: '#007bff',
          borderWidth: 4,
          pointBackgroundColor: '#007bff'
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: false
            }
          }]
        },
        legend: {
          display: false
        }
      }
    })

    //type指定了你要绘制的图表类型----bar:柱状图  pie:饼状图  rabar:雷达图  horizontalBar：水平柱状图
  </script>
</body>

</html>